/**
 * 区域销售热力图组件（简化版，使用颜色深浅展示）
 */
import React, { useState } from 'react';
import { MapPin, ChevronRight } from 'lucide-react';

interface RegionData {
  province: string;
  sales: number;
  cities?: Array<{ name: string; sales: number }>;
}

interface RegionHeatmapProps {
  data: RegionData[];
  onDrillDown?: (province: string) => void;
}

const RegionHeatmap: React.FC<RegionHeatmapProps> = ({ data, onDrillDown }) => {
  const [selectedProvince, setSelectedProvince] = useState<string | null>(null);
  const maxSales = Math.max(...data.map((item) => item.sales));

  const getColorIntensity = (sales: number) => {
    const ratio = sales / maxSales;
    if (ratio > 0.8) return 'bg-red-600';
    if (ratio > 0.6) return 'bg-orange-500';
    if (ratio > 0.4) return 'bg-yellow-400';
    if (ratio > 0.2) return 'bg-green-400';
    return 'bg-blue-300';
  };

  const selectedRegion = data.find((item) => item.province === selectedProvince);

  return (
    <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
      <div className="mb-6">
        <h3 className="text-lg font-bold text-gray-800 mb-1">区域销售热力图</h3>
        <p className="text-xs text-gray-500">点击省份可查看城市级数据</p>
      </div>

      <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
        {data.map((region) => (
          <button
            key={region.province}
            onClick={() => {
              setSelectedProvince(region.province);
              onDrillDown?.(region.province);
            }}
            className={`${getColorIntensity(region.sales)} text-white p-4 rounded-lg hover:scale-105 transition-all duration-200 relative group`}
          >
            <div className="text-sm font-bold mb-1">{region.province}</div>
            <div className="text-xs opacity-90">¥{region.sales.toLocaleString()}</div>
            <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
              <ChevronRight size={16} />
            </div>
          </button>
        ))}
      </div>

      {/* 城市级数据展示 */}
      {selectedRegion && selectedRegion.cities && (
        <div className="mt-6 pt-6 border-t border-gray-100">
          <div className="flex items-center justify-between mb-4">
            <div className="flex items-center gap-2">
              <MapPin size={18} className="text-blue-500" />
              <h4 className="font-bold text-gray-800">{selectedRegion.province} - 城市数据</h4>
            </div>
            <button
              onClick={() => setSelectedProvince(null)}
              className="text-sm text-gray-500 hover:text-gray-700"
            >
              收起
            </button>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
            {selectedRegion.cities.map((city) => (
              <div
                key={city.name}
                className="p-3 bg-gray-50 rounded-lg border border-gray-200 hover:border-blue-300 transition-colors"
              >
                <div className="text-sm font-medium text-gray-700 mb-1">{city.name}</div>
                <div className="text-lg font-bold text-gray-900">¥{city.sales.toLocaleString()}</div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default RegionHeatmap;


